<template>
	<div class="container">
		<div class="el-card-body-top-zero" style="display: flex; gap: 20px">
			<YdCard :title="'响应量'">
				<div style="width: 100%; height: 100%">
					<YdEcharts :ref-val="'average-response-trend-line-s'" :options="state.averageResponseTrendOptions" @echartsClick="echartsClick" />
				</div>
			</YdCard>
			<YdCard :title="'访问量最大服务器TOP10'">
				<div style="width: 100%; height: 100%">
					<YdEcharts :ref-val="'visit-max-bar'" :options="state.interruptTimetrendOptions" @echartsClick="echartsClick" />
				</div>
			</YdCard>
			<YdCard :title="'新建会话量TOP10'">
				<div style="width: 100%; height: 100%">
					<YdEcharts :ref-val="'new-visit-bar'" :options="state.responseDistributionOptions" @echartsClick="echartsClick" />
				</div>
			</YdCard>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ECOption } from '../../../../echarts';
import { reactive, watch } from 'vue';
import 'echarts/lib/component/legend';
import YdEcharts from '@/components/YdEcharts/index.vue';
import { SERIESLABEL, TITLE, GRID, formatterToolTipFn, NAMETEXTSTYLE } from '../echartsConfig';
import { commonFormatter } from '@/utils/common';
import { colorSortGroup, xAxisOrYaxis } from '@/utils/echartsConfig';

const emit = defineEmits<{
	(event: 'echartsClick', e: any): void;
}>();
interface ResponseCountData {
	value: number;
	name: string;
}
interface Props {
	responseCountData: ResponseCountData[];
	visitMaxServerTopScale: string[];
	visitMaxServerTopData: number[];
	newMaxServerTopScale: string[];
	newMaxServerTopData: number[];
}
const props = withDefaults(defineProps<Props>(), {
	responseCountData: () => [],
	visitMaxServerTopScale: () => [],
	visitMaxServerTopData: () => [],
	newMaxServerTopScale: () => [],
	newMaxServerTopData: () => [],
});
const echartsData = reactive<any>({
	grid: {
		left: '0%',
		right: '0%',
		top: '5%',
		bottom: '12%',
		containLabel: true,
	},
	barSeriesColor: {
		type: 'liner',
		x: 0,
		y: 1,
		x2: 0,
		y2: 0,
		colorStops: [
			{
				offset: 0,
				color: '#06F4F4',
			},
			{
				offset: 1,
				color: '#1dc69d',
			},
		],
		global: false, // 缺省为 false
	},
	data: [
		{
			value: 1048,
			name: '省公司',
		},
		{
			value: 735,
			name: '总公司',
		},
		{
			value: 580,
			name: '专业公司',
		},
		{
			value: 484,
			name: '集团总部',
		},
		{
			value: 484,
			name: '其他',
		},
	],
	colorGroup: ['#4DBC84', '#FE9A0C', '#FE5578', colorSortGroup[4]],
});
const state = reactive<any>({
	extendData: {
		pageSize: 10,
		pageNum: 1,
	},
	// 饼状图
	averageResponseTrendOptions: {
		tooltip: {
			trigger: 'item',
			formatter: '{b} : {c}次',
		},
		legend: {
			// vertical 上下布局
			orient: 'vertical',
			top: 'center',
			left: 'right',
			icon: 'circle',
			textStyle: {
				color: '#fff',
				fontSize: 14,
			},
			color: echartsData.colorGroup,
			itemGap: 30,
			// 文字靠右
			align: 'left',
		},
		series: [
			{
				name: '响应量',
				type: 'pie',
				radius: ['50%', '80%'],
				avoidLabelOverlap: false,
				center: ['30%', '50%'],
				color: echartsData.colorGroup,
				labelLine: {
					show: false,
				},
				data: props.responseCountData,
				...SERIESLABEL,
			},
		],
	} as ECOption,
	// 访问量最大服务器TOP10柱状图
	interruptTimetrendOptions: {
		title: { ...TITLE },
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'shadow',
			},
			formatter: function (params: any) {
				// 自定义 tooltip 数据
				return formatterToolTipFn(params, '次');
			},
		},
		grid: GRID,
		xAxis: [
			{
				...xAxisOrYaxis.xAxis,
				data: props.visitMaxServerTopScale,
			},
		],
		yAxis: {
			...xAxisOrYaxis.yAxis,
			// 文本颜色
			axisLabel: {
				show: true,
				textStyle: {
					color: colorSortGroup[colorSortGroup.length - 1],
				},
				formatter: function (params: any) {
					// 自定义 tooltip 数据
					return commonFormatter(params, '次');
				},
			},
		},
		color: colorSortGroup,
		series: [
			{
				name: '访问量最大服务器',
				type: 'bar',
				barWidth: '15%',
				data: props.visitMaxServerTopData,
			},
		],
	} as ECOption,
	// 新建会话量TOP10柱状图
	responseDistributionOptions: {
		title: { ...TITLE },
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'shadow',
			},
			formatter: function (params: any) {
				// 自定义 tooltip 数据
				return formatterToolTipFn(params, '个');
			},
		},
		grid: { ...GRID },
		xAxis: [
			{
				...xAxisOrYaxis.xAxis,
				data: props.newMaxServerTopScale,
			},
		],
		yAxis: {
			...xAxisOrYaxis.yAxis,
			// 文本颜色
			axisLabel: {
				show: true,
				textStyle: {
					color: colorSortGroup[colorSortGroup.length - 1],
				},
				formatter: function (params: any) {
					// 自定义 tooltip 数据
					return commonFormatter(params, '个');
				},
			},
		},
		color: colorSortGroup,
		series: [
			{
				name: '新建会话量',
				type: 'bar',
				barWidth: '10%',
				data: props.newMaxServerTopData,
			},
		],
	} as ECOption,
});

// event

function echartsClick(e: any) {
	emit('echartsClick', e);
}

watch(
	() => props,
	(newVal) => {
		console.log(newVal, 'newwww');
	},
	{ deep: true }
);
</script>
<style lang="scss" scoped>
.container {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 340px;
	gap: 20px;
}
</style>
